<template>
<div class="bg1">

        <!-- 标题 -->
        <div class="module-box ">
            <div style="flex:0 1 10%">
                 <dv-decoration-8 style="width:300px;height:50px;" />
            </div>
            <div style="flex:0 1 80%;">
                <dv-decoration-11 style="width:400px;height:60px;margin: auto;justify-content:center">
                    <div style="display: flex; justify-content: center; align-items: center; font-size:20px; color: #fff;">
                        Philo数据运营中心
                        <el-icon :size="22" style="color: #fff;margin-left: 19px;" @click="$router.push('/index')"><SwitchButton /></el-icon>
                    </div>
                </dv-decoration-11>
            </div>
            <div style="flex:0 1 10%">
                <dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
            </div>
        </div>

        <!-- 第一行 -->
        <div class="module-box">
            
                <dv-border-box-9 style="width:100%; height:200px;">
                <div style="color:#fff;display:flex;justify-content:center; margin-top:10px">单品销量王</div>
                <dv-scroll-ranking-board :config="config23" :color="green" style="width:700px;height:150px;margin-left:15px;margin-top:10px; " />
                </dv-border-box-9>

                <dv-border-box-10  style="width:700px; height:200px;">
                <div style="color:#fff;display:flex;justify-content:center;">本周营业额</div>
                <dv-conical-column-chart :config="config12" style="width:650px;height:200px;margin-top:-30px ;" />
                </dv-border-box-10>
           
        </div>

        <!-- 第二行 -->
        <div class="module-box ">
            <div style="flex:0 1 25%;">
                <dv-border-box-12 style="width:100%;height:200px;position: relative;">
                <!-- <dv-capsule-chart config="config"style="width:100%;height:200px"/> -->
               <!-- <dv-digital-flop :config="config21" style="width:200px;height:50px;position: absolute;top:50%;transform:translateY(-50%);" /> -->
               <div style="color:#fff;display:flex;justify-content:center;">今日营业额</div>
                <BarSimpleVue />
                </dv-border-box-12>
                <dv-border-box-8 style="width:100%;height:200px;"><div style="color:#fff;display:flex;justify-content:center;">种类销量比</div><dv-active-ring-chart :config="config31" style="width:300px;height:300px;margin-top:-60px ;margin-left:20px" /></dv-border-box-8>
            </div>
            <div style="flex:0 1 50%">
                <dv-border-box-1 style="width:100%;height:350px; margin: 10px;">
                <lineChartVue />
                </dv-border-box-1>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-8 style="width:100%;height:300px;">
                  <PolarBarVue />
                </dv-border-box-8>
                <dv-border-box-10 style="width:100%;height:100px;">
                <div style="color:#fff;display:flex;justify-content:center;">今日营业目标</div>
                <!-- <div style="color:#fff;display:flex;justify-content:center;"> - </div> -->
                <dv-percent-pond :config="config33" style="width:200px;height:60px;margin-left:75px; margin-top:10px" />
                </dv-border-box-10>
            </div>
        </div>




        <!-- 第三行 -->
        <!-- <div class="module-box ">
            <div style="flex:0 1 50%">
                 <dv-border-box-8 style="width:100%;height:200px;">
                 
                 </dv-border-box-8>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-9 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-9>
            </div>
            <div style="flex:0 1 25%">
                <dv-border-box-10 style="width:100%;height:200px;">dv-border-box-3</dv-border-box-10>
            </div>
        </div> -->


</div>
</template>

<script>
import lineChartVue from '../dataShow/components/lineChart.vue'
import PolarBarVue from '../dataShow/components/PolarBar.vue'
import BarSimpleVue from '../dataShow/components/BarSimple.vue'
export default {
name: "index",
components:{
lineChartVue,
PolarBarVue,
BarSimpleVue
},
data() {
    return {
        config12:{
             data: [
            {
            name: '周一',
            value: 55
            },
            {
            name: '周五',
            value: 60
            },
            {
            name: '周四',
            value: 40
            },
            {
            name: '周六',
            value: 70
            },
            {
            name: '周末',
            value: 80
            },
            {
            name: '周二',
            value: 35
            },
            {
            name: '周三',
            value: 32
            }
        ],
        showValue: true

        },

        config21:{
            number: [17],
            toFixed: 2,
            style:[3],
            content: '外卖：{nt}元'
        },

        config23:{
            data: [
        {
        name: '多肉葡萄',
        value: 55
        },
        {
        name: '冰美式',
        value: 120
        },
        {
        name: '摩卡',
        value: 78
        },
        {
        name: '爱尔兰冰咖',
        value: 66
        },
        {
        name: '夏日百香',
        value: 80
        },
        {
        name: '桃里桃气',
        value: 45
        },
        {
        name: '桂花乌龙',
        value: 29
        }
        ]         
        },
        config33:{
             value: 66,
            localGradient: true
        },
        config31:{
            data: [
            {
            name: '咖啡类',
            value: 55
            },
            {
            name: '果茶类',
            value: 120
            },
            {
            name: '小吃类',
            value: 78
            },
            {
            name: '酸奶类',
            value: 66
            },
            {
            name: '茶类',
            value: 80
            }
        ]
}


    }
},


}
</script>
<style>
.bg1 {
    /* background:  url("../../assets/background.jpg");
     */
     background-color: rgba(31, 111, 131, 0.915);
    background-size: cover;
    height: 100vh; /* 设置背景高度为屏幕高度 */
  }
.module-box {
  display: flex;
  justify-content: space-between;
  
  flex-direction: row; /* 修改：横向布局 */
  margin: 5px;
}
.d-flex {
    display: flex;
}
</style>